<template>
	<nt-container>
		<view class="order">
			<publicCard key="1" bigTitle="商品信息" :isSlot="true">
				<view class="order-box" v-if="order.goods&& order.goods.parts_name"
					@tap="order.goods.number!=0?nav(`/subpackage/shop/pages/shop/goodsInfo?id=${order.goods_id}`):null">
					<view class="order-box-image">
						<u--image :src="order.goods.images" height="200rpx" width="200rpx"
							mode="scaleToFill"></u--image>
					</view>
					<view class="order-box-content">
						<view class="title">
							{{order.goods.parts_name}}
						</view>
						<view class="desc">
							{{order.goods.remarks}}
						</view>
						<view class="type">
							<text>{{order.goods.parts_type}}</text><text>{{order.goods.area}}</text>
						</view>
					</view>
				</view>
			</publicCard>
			<publicCard key="2" bigTitle="联系信息" :isSlot="true" v-if="order.selluser&&order.selluser.username">
				<u-cell>
					<view slot="title" class="slotClass">
						出售者:[{{order.selluser.area}}]<text class="box-value">{{order.selluser.username}}</text>
					</view>
					<view slot="value" class="slotClass">
						手机号:<text class="box-value">{{order.selluser.mobile}}</text>
					</view>
				</u-cell>
				<u-cell>
					<view slot="title" class="slotClass">
						购买者:[{{order.buyuser.area}}]<text class="box-value">{{order.buyuser.username}}</text>
					</view>
					<view slot="value" class="slotClass">
						手机号:<text class="box-value">{{order.buyuser.mobile}}</text>
					</view>
				</u-cell>
			</publicCard>
			<publicCard key="3" bigTitle="订单信息" :order="order" :forKey="reservation" />
			<publicCard key="4" bigTitle="订单取消信息" v-if="order.canceluser_username" :order="order"
				:forKey="reservation2" />
		</view>
	</nt-container>
</template>
 
<script>
	import publicCard from './components/publicCard.vue'
	import {
		getOrderDetails
	} from '@/api'
	import {
		appConfig
	} from "@/config"

	export default {
		onLoad(options) {
			this.options = options
			this.getDetails()
			uni.$on('getChange', () => {
				uni.$emit('changeList')
			})
		},
		onUnload() {
			uni.$off('getChange')
		},
		data() {
			return {
				options: {},
				order: {},
				// 预约信息
				reservation: {
					ordernumber: {
						title: '订单号'
					},
					c_date: {
						title: '订单创建时间',
					},
					area: {
						title: '订单城市'
					},
					status_text: {
						title: '订单状态',
						color: '#ff0000'
					},
					number: {
						title: '数量'
					},
					unit_price: {
						title: '单价'
					},
					total_price: {
						title: '总价',
						color: '#ff0000'
					},
				},
				reservation2: {
					canceluser_username: {
						title: '取消者'
					},
					cancel_date: {
						title: '取消时间',
					},
					cancel_remarks: {
						title: '取消备注'
					},
				},
			}
		},
		methods: {
			async getDetails() {
				const {
					data
				} = await getOrderDetails(this.options)
				if (data?.goods?.images_list.length > 0) {
					data.goods.images = appConfig.imgCDN + data?.goods?.images_list[0].replace(/\\/g, '/')
				} else {
					data.goods.images = '/static/image/noImage.png'
				}

				this.order = data
				this.order.canceluser_username = this.order?.canceluser?.username || ''

			}
		},
		components: {
			publicCard
		},
	}
</script>

<style lang="scss" scoped>
	.order {
		margin: 40rpx;

		&-box {
			display: flex;
			padding: 30rpx 0;

			&-content {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 28rpx;
				margin-left: 20rpx;

				.title {
					color: #000;
					font-size: 32rpx
				}

				.desc {
					color: #8f8f94
				}

				.type {
					color: #007aff;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}
	}

	.slotClass {

		color: #8f8f94;
		font-size: 28rpx;

		.box-value {
			color: #000
		}
	}
</style>